<template>
  <view class="detail-container">
    <!-- 基础信息 -->
    <view class="section">
      <text class="section-title">基础信息</text>
      <view class="info-list">
        <view class="info-item">
          <text class="info-label">姓名：</text>
          <text class="info-value">{{ memberInfo.userInfo?.real_name }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">身份证号：</text>
          <text class="info-value">{{ memberInfo.userInfo?.idnum }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">手机号：</text>
          <text class="info-value">{{ memberInfo.userInfo?.phone }}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">性别：</text>
          <text class="info-value">{{ MEMBER_GENDER_NAMES[memberInfo.userInfo?.gender]}}</text>
        </view>
        
        <view class="info-item">
          <text class="info-label">所属公司：</text>
          <text class="info-value">{{ memberInfo.member?.orgName }}</text>
        </view>

        <view class="info-item-role">
          <text class="info-label">职位</text>
          <view class="info-role"  v-if="userInfo?.type === USER_TYPES.MAINTENANCE">{{ 
			  MEMBER_REPAIER_ROLE_NAMES[memberInfo.member?.role] }}</view>
		<view class="info-role"  v-else>{{
			  MEMBER_ROLE_NAMES[memberInfo.member?.role] }}</view>
        </view>
      </view>
    </view>

    <!-- 资质认证 - 只在维修商角色时显示 -->
    <view class="section-zz" v-if="userInfo?.type === USER_TYPES.MAINTENANCE">
	<!-- <view class="section-zz"> -->
      <text class="section-title-zz">资质认证</text>
      <view class="qualification-list">
        <view class="qualification-item" v-for="(item, index) in qualificationList" :key="index">
          <image class="check-icon" src="/static/my/my-zz.png" mode="aspectFit"></image>
          <text class="qualification-text">{{ item }}</text>
        </view>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons" v-if="memberInfo.member?.role != MEMBER_ROLES.DIRECTOR">
      <view class="update-btn" @click="handleUpdateRole">
        <text class="btn-text">更改职位</text>
      </view>
      <view class="delete-btn" @click="handleDeleteMember">
        <text class="btn-text">删除员工</text>
      </view>
    </view>
	
   <!-- 引入确认弹窗组件 -->
   
   <member-delete-dialog
   ref="confirmDialog"
   @confirm="confirmDelete"
   @cancel="cancelDelete"
   ></member-delete-dialog>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { memberApi } from '@/service/api.js'
import { USER_TYPES,MEMBER_ROLE_NAMES,MEMBER_REPAIER_ROLE_NAMES,MEMBER_GENDER_NAMES,MEMBER_ROLES} from '@/service/api.js'
import { QUALIFICATION_MEMBER_MAP,QUALIFICATION_MEMBER_ORDER} from '@/service/api.js'
import { userStore } from '@/utils/userStore.js'
import { RouterMethods } from '../../utils/router'

const memberId = ref('')
const userInfo = ref({})
const memberInfo = ref({})


// 资质认证列表
const qualificationList = ref([])

// 获取成员详情
const fetchMemberDetail = async () => {
  try {
    userInfo.value = userStore.getUserInfo()
    const response = await memberApi.getMemberDetail(memberId.value)
    if (response.code === undefined) {
      memberInfo.value = response
	  qualificationList.value = QUALIFICATION_MEMBER_ORDER
	  			  .filter(key => response.userInfo[key] === "1")  // 只保留值为"1"的项
	  			  .map(key => QUALIFICATION_MEMBER_MAP[key])  // 转换为对应的资质名称
    } else {
	  throw new Error(response.msg || '获取成员信息失败')
	}
  } catch (error) {
    uni.showToast({
      title: error.message ||'获取成员信息失败',
      icon: 'none'
    })
  }
}

// 更改职位
const handleUpdateRole = () => {
   const encodedData = encodeURIComponent(JSON.stringify(memberInfo.value))
   RouterMethods.toMyMemberChange(encodedData)
}

const confirmDialog = ref(null)
// 删除员工
const handleDeleteMember = () => {
   confirmDialog.value.open()
}
const confirmDelete = async () => {
  try {
    const response = await memberApi.deleteMember(memberId.value)
    if (response.code === undefined) {
      uni.showToast({
        title: '删除成功',
        icon: 'success'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    } else {
      throw new Error(response.msg || '删除失败')
    }
  } catch (error) {
    uni.showToast({
      title: error.message || '删除失败',
      icon: 'none'
    })
  }
}

// 取消删除
const cancelDelete = () => {
  console.log('取消删除')
}

onShow(()=>{
	// 获取路由参数中的成员ID
	const pages = getCurrentPages()
	const currentPage = pages[pages.length - 1]
	memberId.value = currentPage.options.id
	fetchMemberDetail()
})
onMounted(() => {
  // // 获取路由参数中的成员ID
  // const pages = getCurrentPages()
  // const currentPage = pages[pages.length - 1]
  // memberId.value = currentPage.options.id
  
  // fetchMemberDetail()
})
</script>

<style>
.detail-container {
  min-height: 100vh;
  padding: 0 56rpx;
  padding-bottom: calc(82rpx + env(safe-area-inset-bottom));
}

.section {
  margin-top: 56rpx;
}

.section-title {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.info-list {
  background: #FFFFFF;
  margin-top: 40rpx;
}

.info-item {
  /* background-color: yellow; */
  margin-bottom: 41rpx;
  border-bottom: 2rpx solid rgba(0,30,50,1);
  padding-bottom: 13rpx;
}
.info-label {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;;
}

.info-value {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.info-item-role {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.info-role {
 height: 64rpx;
 width: 156rpx;
 background: #285789;
 border-radius: 10rpx;
 font-family: PingFangSC-Medium;
 font-size: 28rpx;
 color: #FFFFFF;
 letter-spacing: 0;
 display: flex;
 justify-content: center;
 align-items: center;
}

.section-zz {
  padding-bottom: calc(40rpx + 82rpx + env(safe-area-inset-bottom));
  padding-top: 44rpx;
  display: flex;
  flex-direction: column;
  gap: 43rpx;
}

.section-title-zz {
  font-family: PingFangSC-Medium;
  font-size: 28rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}

.qualification-list {
  background: #FFFFFF;
}

.qualification-item {
  display: flex;
  align-items: center;
  margin-bottom: 52rpx;
}

.check-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 18rpx;
}

.qualification-text {
 font-family: PingFangSC-Medium;
 font-size: 28rpx;
 color: #000000;
 letter-spacing: 0;
 font-weight: 500;
}

.bottom-buttons {
  position: fixed;
  left: 44rpx;
  right: 44rpx;
  bottom: 0;
  display: flex;
  justify-content: space-between;
  background: #FFFFFF;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
}

.update-btn, .delete-btn {
  width: 320rpx;
  height: 82rpx;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}


.update-btn {
  background: #F2B642;
}

.update-btn .btn-text {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}

.delete-btn {
  background: #F2B642;
}

.delete-btn .btn-text {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  color: #000000;
  letter-spacing: 0;
  text-align: center;
  font-weight: 500;
}

.btn-text {
  font-family: PingFangSC-Medium;
  font-size: 32rpx;
  letter-spacing: 0;
  font-weight: 500;
}
</style>